<!-- eslint-disable vue/v-on-event-hyphenation -->
<template>
  <z-paging
    ref="paging"
    v-model="sourceData"
    v-bind="zPagingConfig"
    @query="query"

    @loadingStatusChange="zPagingEvent('loadingStatusChange', $event)"
    @refresherStatusChange="zPagingEvent('refresherStatusChange', $event)"
    @refresherTouchstart="zPagingEvent('refresherTouchstart', $event)"
    @refresherTouchmove="zPagingEvent('refresherTouchmove', $event)"
    @refresherTouchend="zPagingEvent('refresherTouchend', $event)"
    @onRefresh="zPagingEvent('onRefresh', $event)"
    @onRestore="zPagingEvent('onRestore', $event)"
    @scroll="zPagingEvent('scroll', $event)"
    @scrollTopChange="zPagingEvent('scrollTopChange', $event)"
    @scrolltolower="zPagingEvent('scrolltolower', $event)"
    @scrolltoupper="zPagingEvent('scrolltoupper', $event)"
    @listChange="zPagingEvent('listChange', $event)"
    @virtualListChange="zPagingEvent('virtualListChange', $event)"
    @contentHeightChanged="zPagingEvent('contentHeightChanged', $event)"
    @emptyViewReload="zPagingEvent('emptyViewReload', $event)"
    @emptyViewClick="zPagingEvent('emptyViewClick', $event)"
    @touchDirectionChange="zPagingEvent('touchDirectionChange', $event)"
    @hidedKeyboard="zPagingEvent('hidedKeyboard', $event)"
  >
    <template #top>
      <slot name="top"></slot>
    </template>

    <template #bottom>
      <slot name="bottom"></slot>
    </template>

    <template #left>
      <slot name="left"></slot>
    </template>

    <template #right>
      <slot name="right"></slot>
    </template>

    <template #backToTop>
      <slot name="backToTop"></slot>
    </template>

    <template #refresher>
      <slot name="refresher"></slot>
    </template>

    <template #cell>
      <slot name="cell"></slot>
    </template>

    <template #loading>
      <slot name="loading"></slot>
    </template>

    <!-- <template v-if="slots.empty" #empty>
      <slot name="empty"></slot>
    </template> -->
    <slot :data="sourceData"></slot>
  </z-paging>
</template>

<script lang="ts" setup>
import { computed, ref } from 'vue'
import type { ScrollListConfig } from './types'

const props = defineProps<{
  /**
   * 配置项
   * @param apiHandler 【必选】接口promise对象
   * @param apiParams 【可选】接口参数对象
   * @param interceptor【可选】拦截器
   * @param zPagingConfig 【可选】z-paging配置对象https://z-paging.zxlee.cn/api/props/common.html
   */
  config: ScrollListConfig
}>()

const paging = ref<any>(null)
const sourceData = ref<Array<any>>([])
const responseData = ref<any>()
// const slots = useSlots()


const defaultZpagingConfig = {
  // @see https://z-paging.com/api/props/loading.html
  'auto-show-system-loading': true,
}

const zPagingConfig = computed(() => {
  return { ...defaultZpagingConfig, ...props.config.zPagingConfig }
})

const query = (page: number, size: number) => {
  const { apiHandler, apiParams, interceptor } = props.config
  const params = typeof apiParams === 'function' ? apiParams({ page, size }) : apiParams
  responseData.value = {}
  apiHandler({ ...params, page, limit: size }).then(res => {
    const [err, data] = res
    responseData.value = data
    if (interceptor) {
      paging.value.complete(interceptor(data?.list || [], page))
    } else {
      paging.value.complete(data?.list)
    }
  }).catch(() => {
    paging.value.complete(false)
  })
}

/**
 * 事件处理
 * TIP: 由于小程序环境下，透传属性（事件）不生效，故需显性定义
 */
const emit = defineEmits([
  'loadingStatusChange',
  'refresherStatusChange',
  'refresherTouchstart',
  'refresherTouchmove',
  'refresherTouchend',
  'onRefresh',
  'onRestore',
  'scroll',
  'scrollTopChange',
  'scrolltolower',
  'scrolltoupper',
  'listChange',
  'virtualListChange',
  'contentHeightChanged',
  'emptyViewReload',
  'emptyViewClick',
  'touchDirectionChange',
  'hidedKeyboard',
])

const zPagingEvent = (name: any, e: any) => emit(name, e)

defineExpose({
  paging,
  sourceData,
  responseData,
})
</script>

<script lang="ts">
export default {
  name: 'scroll-list',
  inheritAttrs: false, // 禁用自动继承
}
</script>
